<template>
  <div>
    {{ formData }}
    <hr />
    <el-form :model="formData" label-width="120px" ref="oustsideFormRef" :rules="rules" v-loading="loading" class="pr-4">
      <el-form-item label="工艺流程代号:" prop="pflcode">
        <el-input v-model="formData.pflcode" name="pflcode" clearable />
      </el-form-item>

      <el-form-item label="工艺流程名称:" prop="processname">
        <el-input v-model="formData.processname" name="processname" clearable />
      </el-form-item>

      <el-form-item label="描述:" prop="description">
        <el-input type="textarea" v-model="formData.description" name="description" clearable />
      </el-form-item>

      <el-form-item label="工序资料:" prop="detailscheck_all">
        <template #default="scope">
          <div class="process-box">
            <el-form :model="innerForm" ref="innerFormRef" :rules="innerRules">
              <el-table :data="innerForm.tableData" style="width: 100%" border>
                <el-table-column prop="process" label="生产顺序" min-width="80">
                  <template #default="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.process'"> <el-input v-model="scope.row.process" type="number" :rules="innerRules.process" /></el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="processdata_id" label="工序名称">
                  <template #default="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.processdata_id'" :rules="innerRules.processdata_id">
                      <el-input v-model="scope.row.processdata_id" readonly @click="choseHandler(scope.$index)"
                    /></el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="unitprice" label="单价">
                  <template #default="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.unitprice'" :rules="innerRules.unitprice"> <el-input v-model="scope.row.unitprice" type="number" clearable /></el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button type="danger" @click="delHandler(scope.$index)" size="small">删除</el-button>
                    <el-button type="warning" @click="addHandler" size="small" v-if="scope.$index == innerForm.tableData.length - 1">新增行</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            <!-- <div class="process-tip">(请按顺序选择){{ checkList }}  </div>
          <div>
            <el-checkbox-group v-model="checkList" v-for="ele in props.processdataList" :key="ele.id" @change="changeList">
              <el-checkbox v-model="ele.purchaseorder_id" :label="ele.processname" style="margin-right: 20px" />
            </el-checkbox-group>
          </div> -->
          </div>
        </template>
      </el-form-item>

      <el-dialog v-model="dialogVisible" title="工艺资料选择" width="70%" >
        <processdata :ischose="ischose" @send-Obj="getHandler"></processdata>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确认 </el-button>
          </span>
        </template>
      </el-dialog>

      <div class="flex justify-end">
        <!-- <el-button type="success" @click="submitForm(formData)">{{ $t('system.confirm') }}</el-button> -->
        <el-button type="success" @click="submitHandler">新增</el-button>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { useCreate } from '/admin/composables/curd/useCreate'
import { useShow } from '/admin/composables/curd/useShow'
import { computed, onMounted, ref, reactive, nextTick } from 'vue'
import { ElMessageBox } from 'element-plus'
import processdata from '../processdata/index.vue'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const ischose = ref(true)


const props = defineProps({
  primary: String,
  api: String,
  processdataList: Array,
})

const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)

if (props.primary) {
  useShow(props.api, props.primary, formData)
}

console.log(props.processdataList)

console.log('表单对象', formData.value)

const innerForm = reactive({
  tableData: [
    {
      process: 1,
      processdata_id: '',
      unitprice: '',
    },
  ],
})
const rules = reactive({
  pflcode: [{ required: true, message: '不能为空', trigger: 'blur' }],
  processname: [{ required: true, message: '不能为空', trigger: 'blur' }],
  description: [{ required: true, message: '不能为空', trigger: 'blur' }],
})
const innerRules = reactive({
  process: [{ required: true, message: '不能为空', trigger: 'blur' }],
  processdata_id: [{ required: true, message: '不能为空', trigger: 'change' }],
  unitprice: [{ required: true, message: '不能为空', trigger: 'blur' }],
})


let delHandler = index => {
  innerForm.tableData.splice(index, 1)
  innerForm.tableData = innerForm.tableData.map((item, newIndex) => ({
    ...item,
    process: newIndex + 1,
  }))
  console.log(innerForm.tableData)
}

let addHandler = () => {
  innerForm.tableData.push({
    process: innerForm.tableData.length + 1,
    processdata_id: '',
    unitprice: '',
  })
}

let currIndex = ref(0)

const choseHandler = index => {
  console.log('当前行', index)
  currIndex.value = index
  dialogVisible.value = true
}
let getArr = ref([])
const getHandler = obj => {
  console.log('选择的数据：', obj)

  const hasObject = getArr.value.find(item => item.processdata_id == obj.processdata_id)

  if (!hasObject) {
    getArr.value.push(obj)
    console.log(getArr.value)
    dialogVisible.value = false
    innerForm.tableData[currIndex.value].processdata_id = obj.processname
  } else {
    ElMessage.warning('请勿重复选择！')
    return
  }

  // getArr.value.push(obj)
}

let oustsideFormRef = ref()
let innerFormRef = ref()

const submitHandler = () => {
  oustsideFormRef.value.validate(valid1 => {
    if (!valid1) {
      return
    } else {
      innerFormRef.value.validate(valid2 => {
        if (!valid2) {
          return
        } else {
          // console.log('检验成功')
          const newTable = innerForm.tableData.map(item => {
            const match = getArr.value.find(ele => item.processdata_id == ele.processname)
            if (match) {
              item.processdata_id = match.processdata_id
            }
          })
          formData.value.detailscheck_all = innerForm.tableData
            // postAddHandler(formData.value)
          if (props.primary) {
            editPost(props.primary,formData.value)
            // putAddHandler(formData.value)
          } else {
            console.log('没有')
            postAddHandler(formData.value)
          }
        }
      })
    }
  })
}

const postAddHandler = data => {
  http.post('/promanagement/processflow', data).then(r => {
    console.log(r)
    let res = r.data.data
    ElMessage.success(res.message)
    if ((res.code = '10000')) {
      emit('close')
      nextTick(() => {
        // formData = []
        // innerForm = {}
      })
    }
    // barcodeList.value = res.data
  })
}
const editPost = (id,data) => {
  http.post(`/promanagement/update/${id}`, data).then(r => {
    console.log(r)
    let res = r.data.data
    ElMessage.success(res.message)
    if ((res.code = '10000')) {
      emit('close')
    }
    // barcodeList.value = res.data
  })
}
const emit = defineEmits(['close'])

onMounted(() => {
  close(() => emit('close'))
})
</script>

<style>
.process-box {
  width: 100%;
  /* border: 2px solid pink; */
}
.process-tip {
  color: #999;
}
.el-checkbox-group {
  display: inline-block;
}
</style>
